<template>
  <v-card>
    <v-card-title>
      <span class="headline">个人资料</span>
    </v-card-title>
    <v-card-text>
      <v-container fluid>
        <v-row no-gutters>
          <v-col
            cols="12"
            xl="4"
            lg="4"
            md="4"
            sm="4"
            class="d-flex align-center"
          >
            <v-subheader class="font-weight-bold text-no-wrap"
              >头像</v-subheader
            >
          </v-col>
          <v-col>
            <v-row no-gutters>
              <v-col cols="auto" class="d-flex justify-center">
                <img
                  :src="avatarUrl"
                  alt=""
                  width="72"
                  height="72"
                  id="avatar"
                />
              </v-col>
              <v-col>
                <v-col class="py-0"> ● JPG\PNG\JPEG </v-col>
                <v-col class="py-0"> ● 小于5M </v-col>
                <v-col class="py-0">
                  <v-btn small color="banzhuan" dark @click="clickUpload"> 点击上传 </v-btn>
                  <input ref="filElem" style="display: none" type="file" value=""  name="avatar" id="avatar-input" @change="uploadAvatar" accept="image/jpeg, image/jpg, image/png">

                </v-col>
              </v-col>
            </v-row>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="4" class="d-flex align-center">
            <v-subheader class="font-weight-bold text-no-wrap"
              >用户名</v-subheader
            >
          </v-col>
          <v-col>
            <v-text-field value="28.00" color="banzhuan"></v-text-field>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="4" class="d-flex align-center">
            <v-subheader class="font-weight-bold text-no-wrap"
              >职位</v-subheader
            >
          </v-col>
          <v-col>
            <v-text-field value="example" color="banzhuan"></v-text-field>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="4" class="d-flex align-center">
            <v-subheader class="font-weight-bold text-no-wrap"
              >公司</v-subheader
            >
          </v-col>
          <v-col>
            <v-text-field value="12:30:00" color="banzhuan"></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="4" class="d-flex align-center">
            <v-subheader class="font-weight-bold text-no-wrap"
              >个人介绍</v-subheader
            >
          </v-col>
          <v-col>
            <v-text-field value="12:30:00" color="banzhuan"></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="4" class="d-flex align-center">
            <v-subheader class="font-weight-bold text-no-wrap"
              >个人主页</v-subheader
            >
          </v-col>
          <v-col>
            <v-text-field value="12:30:00" color="banzhuan"></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
    <v-card-actions class="d-flex justify-center">
      <v-btn color="banzhuan" dark> 保存 </v-btn>
      <nuxt-link to="/homepage" class="blue--text text-accent-3 text-decoration-none">
      <v-btn color="#eeee" class="mx-2"> 返回 </v-btn>
      </nuxt-link>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    avatarUrl: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4075663167,1198688310&fm=26&gp=0.jpg",
  }),
  methods: {
      clickUpload(){

          this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
      },
    uploadAvatar(value) {


        const inputFile = this.$refs.filElem.files[0];

        this.avatarUrl = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1298565442,102995179&fm=26&gp=0.jpg"

    },
  },
}
</script>

<style></style>
